<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/common/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${path}/static/common/layui/css/layui.css"/>
</head>
<body>
	<form id="form" class="layui-form layui-form-pane" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">ID</label>
	    <div class="layui-input-block">
	      <input type="text" name="id" autocomplete="off" placeholder="请输入分类ID" class="layui-input">
	    </div>
	  </div>
	  
	    <div class="layui-form-item">
	    <label class="layui-form-label">父级分类</label>
	    <div class="layui-input-inline">
	      <select id="topCategoryId" lay-filter="topCategoryFilter" name="parentId">
	        <option value="">请选择一级分类</option>
	        <c:forEach items="${topCategoryList}" var="category">
		        <option value="${category.id}" >${category.name}</option>
	        </c:forEach>
	      </select>
	    </div>
	    </div>
	    <br/>
	   <div class="layui-form-item">
	    <label class="layui-form-label">分类名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="请输入分类名称" class="layui-input">
	    </div>
	  </div> 
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="在售" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">同类排序</label>
	    <div class="layui-input-block">
	      <input type="text" name="sortOrder" autocomplete="off" placeholder="请输入同类别中顺序" class="layui-input">
	    </div>
	  </div>
   </form>
   <button class="layui-btn" onclick="submitForm()">添加</button>
   
   
   <script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/kindeditor/lang/zh_CN.js" type="text/javascript" charset="utf-8"></script>
   
   <script type="text/javascript">
   	   layui.use(["form"], function() {
   			var form = layui.form;
   			
   			form.on("select(topCategoryFilter)", function(data) {
   				// data代表当前选中的option标签对象(js dom)
   				console.log(data.value);// 被选中的option的value值
   				// 根据一级分类去加载二级二类
   				$.post(
   					"${path}/category/selectSecondCategoryByTopCategoryId.action",
   					{"topCategoryId" : data.value},
   					function(result) {
   						console.log(result);
   						$("#secondCategoryId").empty();
   						// result.data  List<Category> secondCategoryList;
   						$("#secondCategoryId").append("<option value=''>请选择二级分类</option>");
   						$(result.data).each(function() {
   							// this代表当前正在遍历的Category对象
   							var html = "<option value='"+this.id+"'>"+this.name+"</option>";
   							$("#secondCategoryId").append(html);
   						});
   						// 刷新select标签，重新渲染
   						form.render("select");
   					},
   					"json"
   				);
   			});
   			
   			
   			
   	   });
   
	   function submitForm() {
		   console.log("执行");
			$.post(
				"${path}/category/insert.action",
				$("#form").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	   
	   KindEditor.ready(function(K) {
		    var kingEditorParams = {
		         afterBlur: function () { this.sync(); }
		    }
		    KindEditor.create('#editor_id', kingEditorParams);
		});
	</script>
</body>
</html>